﻿@{
    Layout = "_LayoutH";
    @model Sys_user
}
@*<div id="app" v-cloak>
        <form class="form-horizontal" onsubmit="return false">
            <div class="box-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input v-model="UserName" type="text" class="input-text" v-focus>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-10">
                        <input type="text" class="input-text" v-model="UserNickname">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-10">
                        <input type="text" class="input-text" v-model="UserNickname">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">备注</label>
                    <div class="col-sm-10">
                        <textarea v-model="Remark" class="form-control" rows="3" placeholder="备注...100个字符以内"></textarea>
                        <p class="textarea-numberbar"><em class="textarea-length">{{count}}</em>/100</p>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="pull-right box-tools">
                    <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
                </div>
            </div>
        </form>
    </div>*@
<div id="app" v-cloak>
    <form class="form-horizontal" onsubmit="return false">
        <div class="box-body">
            @*<div class="form-group">
                    <label for="starttime" class="col-sm-2 control-label">实际开始时间</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="starttime" />
                    </div>
                    <label for="endtime" class="col-sm-2 control-label">实际结束时间</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" id="endtime" />
                    </div>
                </div>*@
            <table class="table table-bordered">
                <tr>
                    <td>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="c-red">*</span>用户名：</label>
                            <div class="col-sm-10">
                                <input v-model="UserName" type="text" class="form-control" v-focus>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <label class="control-label col-sm-2"><span class="c-red">*</span>昵称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="UserNickname">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group" v-if="UserId<=0">
                            <label class="control-label col-sm-2"><span class="c-red">*</span>初始密码：</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" autocomplete="off" value="" placeholder="密码" v-model="Pwd1">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group" v-if="UserId<=0">
                            <label class="control-label col-sm-2"><span class="c-red">*</span>确认密码：</label>
                            <div class=" col-sm-10">
                                <input type="password" class="form-control" autocomplete="off" placeholder="确认新密码" v-model="Pwd2">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="form-group">
                            <label class="control-label col-sm-2"><span class="c-red">*</span>性别：</label>
                            <div class="col-sm-10 ">
                                <label class="radio-inline">
                                    <input type="radio" value="1" v-model="sex">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="0" v-model="sex">女
                                </label>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <label class="control-label col-sm-2"><span class="c-red">*</span>手机：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="Tel">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="c-red">*</span>邮箱：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="Email">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        @await Component.InvokeAsync("Dept")
                        @*<div class="form-group">
                                <label class="col-sm-2 control-label">部门：</label>
                                <div class="col-sm-10">
                                    <select class="form-control" v-model="DeptId">
                                        <option value="">请选择</option>
                                        @{
                                            if (ViewBag.Dept != null || ViewBag.Dept.Count > 0)
                                            {
                                                foreach (var item in ViewBag.Dept)
                                                {
                                                    <option value="@item.DeptId">@item.DeptName</option>
                                                }
                                            }
                                        }
                                    </select>
                                </div>
                            </div>*@
                    </td>
                    <td>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">角色：</label>
                            <div class="col-sm-10">
                                <select class="form-control" v-model="RoleId">
                                    <option value="">请选择</option>
                                    @{
                                        if (ViewBag.Role != null || ViewBag.Role.Count > 0)
                                        {
                                            foreach (var item in ViewBag.Role)
                                            {
                                                <option value="@item.RoleId">@item.RoleName</option>
                                            }
                                        }
                                    }
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <div class="col-sm-10">
                                <textarea v-model="Remark" class="form-control" rows="3" placeholder="备注...100个字符以内"></textarea>
                                <p class="textarea-numberbar"><em class="textarea-length">{{count}}</em>/100</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="box-footer">
                <div class="pull-right box-tools">
                    <input v-on:click="addL" class="btn btn-primary radius" type="submit" v-model="submit">
                </div>
            </div>
        </div>
    </form>
</div>
@section scripts{
    <script>
        $(function () {
            parent.$("span[class='layui-layer-setwin']")[0].childNodes[1].onclick = function () {
                //var iframeH = parent.$("div[type='iframe']")[0].clientHeight;
                //parent.$("div[class='layui-layer-content']")[0].childNodes[0].style.height = 1000;
                var index = parent.layer.getFrameIndex(window.name);
                //console.info(parent.$("#layui-layer" + index)[0].style["height"]);
                parent.$("#layui-layer-iframe" + index)[0].style.height = parent.document.body.clientHeight + "px";
            };
        });
        var app = new Vue({
            el: "#app",
            data: {
                submit: "添加",
                sex: "@Model.Sex",
                Remark: "@Model.Remark",
                Tel: "@Model.Tel",
                Email: "@Model.Email",
                UserName: "@Model.UserName",
                UserNickname: "@Model.UserNickname",
                Pwd1: "",
                Pwd2: "",
                RoleId: "@Model.RoleId",
                DeptId: "@Model.DeptId",
                UserId: "@Model.UserId"
            },
            computed: {
                count: function () {
                    return this.strLength(this.Remark, false);
                }
            },
            methods: {
                addL: function () {
                    var _self = this;
                    if (_self.UserName.length <= 0) {
                        layer.msg("姓名不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.UserNickname.length <= 0) {
                        layer.msg("昵称不能为空", { icon: 2 });
                        return false;
                    }
                    if (_self.UserId.length<=0) {
                        if (_self.Pwd1.length <= 0) {
                            layer.msg("密码不能为空", { icon: 2 });
                            return false;
                        }
                        if (_self.Pwd2 !== _self.Pwd1) {
                            layer.msg("两次输入密码不一致", { icon: 2 });
                            return false;
                        }
                    }
                    if (_self.DeptId.length <= 0) {
                        layer.msg("请选择部门", { icon: 2 });
                        return false;
                    }
                    if (_self.RoleId.length <= 0) {
                        layer.msg("请选择角色", { icon: 2 });
                        return false;
                    }
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    var data = {
                        id: _self.UserId,
                        UserName: _self.UserName,
                        UserNickname: _self.UserNickname,
                        Pwd: _self.Pwd2,
                        Remark: _self.Remark,
                        Tel: _self.Tel,
                        RoleId: _self.RoleId,
                        sex: _self.sex,
                        Email: _self.Email,
                        DeptId: _self.DeptId
                    };
                    yui.$axiospostform('/User/AddOrUpdate', data)
                        .then(function (response) {
                            if (response.data.Item1 === 101) {
                                layer.tips(response.data.Item2, '.layui-layer-setwin', {
                                    tips: [1, '#3595CC'],
                                    time: 3000
                                });
                                layer.close(index);
                                return false;
                            }
                            if (response.data.Item1) {
                                layer.msg(response.data.Item2, { icon: 1, time: 1000 });
                                setTimeout(function () {
                                    yui.layer_close3();
                                }, 500);
                            } else {
                                layer.msg(response.data.Item2, { icon: 5 });
                            }
                            layer.close(index);
                        })
                        .catch(function (error) {
                            layer.close(index);
                        });
                }
            }
        });
    </script>
}